<template>
	<view>
		<view class="form-container">
			<u--form :model="form" ref="uForm" labelPosition="top" labelWidth="90" errorType="message">
				<u-form-item label="处理人" prop="name" required>
					<u-input v-model="form.name" placeholder="请输入处理人" />
				</u-form-item>
				<u-form-item label="处理描述" prop="desc" required>
					<u--textarea v-model="form.desc" placeholder="请输入处理描述" count></u--textarea>
				</u-form-item>
			</u--form>
			<u--form :model="variableForm" ref="variableForm" labelPosition="top" class="second-form">
				<u-form-item v-for="(item, index) in variableItems" :key="index">
					<view class="row-container">
						<view class="first-container" @click="goodsNameSelectShow(index)">
							<u-input v-model="item.goodsName" placeholder="请选择物品" readonly />
							<u-picker :show="goodsNameShow" :columns="goodsList" keyName="label"
								@confirm="goodsNameConfirm" @cancel="goodsNameCancel"></u-picker>
						</view>
						<view class="second-container">
							<u-input v-model="item.goodsNum" type="number" placeholder="请输入商品数量" />
						</view>
						<view class="third-container">
							<u-icon name="plus-circle" size="25" @click="addGoods()"></u-icon>
							<u-icon class="third-container-icon" v-if="index != 0" name="minus-circle" size="25"
								@click="deleteGoods(item)"></u-icon>
						</view>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<view class="footer-box">
			<view class="footer-container">
				<u-button type="primary" @click="confirm()">提 交</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		onLoad: function(option) {
			if (option.auditId != undefined) {
				this.auditId = option.auditId
				// console.log(this.auditId, '传参')
			}
			this.addGoods()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				auditId: '',
				errorType: 'message',
				form: {
					name: '',
					desc: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入处理人',
						trigger: ['change', 'blur'],
					}],
					desc: [{
						required: true,
						message: '请输入处理人',
						trigger: ['change', 'blur'],
					}],
				},
				variableForm: {
					goodsName: '',
					goodsNum: '',
				},
				variableItems: [],
				goodsNameShow: false,
				goodsList: [
					[{
						label: '手套',
						value: 1001
					}, {
						label: '口罩',
						value: 1002
					}, {
						label: '清洗液',
						value: 1003
					}]
				],
				flagIndex: 0
			}
		},
		methods: {
			confirm() {
				this.$refs.uForm.validate().then(res => {
					let tempArr = []
					for (let k = 0; k < this.variableItems.length; k++) {
						if (this.variableItems[k].goodsName != '' && this.variableItems[k].goodsNum == '') {
							this.$refs.uToast.show({
								message: '请输入商品数量',
								type: 'error',
								position: 'bottom'
							})
							return
						} else if (this.variableItems[k].goodsNum != '' && this.variableItems[k].goodsName == '') {
							this.$refs.uToast.show({
								message: '请选择物品',
								type: 'error',
								position: 'bottom'
							})
							return
						}
					}
					for (let i = 0; i < this.variableItems.length; i++) {
						for (let j = 0; j < this.goodsList[0].length; j++) {
							if (this.variableItems[i].goodsName != '' && this.variableItems[i].goodsName == this
								.goodsList[0][j].label) {
								tempArr.push({
									'goodsName': this.variableItems[i].goodsName,
									'goodsNum': this.variableItems[i].goodsNum,
								})
								continue;
							}
						}
					}
					let params = {
						name: this.form.name,
						desc: this.form.desc,
						variableItems: tempArr
					}
					console.log(params)
					uni.navigateTo({
						url: './index'
					});
				}).catch(errors => {
					// console.log('校验失败')
				})
			},
			addGoods() {
				this.variableForm = {
					goodsName: '',
					goodsNum: '',
				};
				this.variableItems.push(this.variableForm);
				// this.$set(this.variableItems, this.variableItems.length, this.variableForm)
				// console.log(this.variableItems)
			},
			deleteGoods(item) {
				var index = this.variableItems.indexOf(item); //找到对应下标
				if (index !== -1) {
					this.variableItems.splice(index, 1);
				}
			},
			goodsNameSelectShow(index) {
				this.goodsNameShow = true
				this.flagIndex = index
			},
			goodsNameConfirm(e) {
				this.variableItems[this.flagIndex].goodsName = e.value[0].label
				this.goodsNameShow = false
			},
			goodsNameCancel() {
				this.variableItems[this.flagIndex].goodsName = ''
				this.goodsNameShow = false
			}
		}
	}
</script>

<style lang="scss">
	.form-container {
		background-color: #ffffff;
		padding: 30rpx;
	}

	.second-form {
		width: 100%;
		height: 860rpx;
		overflow-y: auto;
	}

	.row-container {
		display: flex;
		width: 100%;
	}

	.first-container {
		width: 40%;
	}

	.second-container {
		width: 40%;
		padding-left: 30rpx;
	}

	.third-container {
		width: 20%;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
	}

	.third-container-icon {
		margin-left: 20rpx;
	}

	.footer-box {
		padding: 30rpx;

		.footer-container {
			position: fixed;
			margin: auto;
			left: 30rpx;
			right: 30rpx;
			bottom: 30rpx;
		}
	}
</style>
